<template>
	<view>
		<dsl-navbar title="个人优势" bgTopImg="#ffffff" isBack="true"></dsl-navbar>
		<!-- titleRight="完成" @rightForm='rightForm' -->
		<view>
			<view class="flex flex-wrap padding-lr">
				<view class="table" v-for="(item,index) in list" :class="{'active_bg':index== num}"
					@click="num = index">
					{{item}}
				</view>
			</view>
		</view>
		<view class="rowsc fixed" style="bottom: 30rpx;" @click="isPopWallet = true" v-if="userId == taId">
			<view class=" submit ">
				创建新标签
			</view>
		</view>
		<!-- 优惠券兑换 -->
		<view class="warp2" @click="isPopWallet =false" v-if="isPopWallet">
			<view class="pop_body animation-slide-bottom" @click.stop>
				<view class="padding-tb  solid-bottom flex align-center ">
					<view style="width: 33.3%;"></view>
					<view style="width: 33.3%;" class="text-center">个人优质添加</view>
					<view class="cuIcon-roundclose text-right padding-right" style="width: 33.3%;font-size: 40rpx;"
						@click="isPopWallet=false"></view>
				</view>
				<view class="pop_input ">
					<input type="text" value="" placeholder="请输入个人优势" class="text-center" v-model="inputValue" />
				</view>
				<view class="pop_submit" @click="getphotoWallApi({advantage:inputValue})">
					提交
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getUserInfo
	} from '@/common/path.js'
	import {
		mapState,
		mapActions
	} from 'vuex'
	export default {
		data() {
			return {
				inputValue: '', //请输入
				list: [],
				isPopWallet: false,
				num: 11110,
				userId: '', //自己id
				taId: '', //对面id
			}
		},
		//生命周期函数
		onReady() {},
		onLoad(option) {
			this.taId = option.id
		},
		watch: {
			num(i) {
				let v = this
				if (v.userId == v.taId) {  //只有是自己主页才可操作
					uni.showActionSheet({
						itemList: ['删除'],
						success: function(res) {
							if (res.tapIndex == 0) {
								v.removeUserAdvantage({
									indexList:[i]
								})
							}
						}
					});
				}
			}
		},
		onShow() {
			this.getUserInfo()
			this.getUserInfo2()
		},
		methods: {
			/**
			 * getphotoWallApi 查询用户信息
			 * removeUserAdvantage 删除优势
			 */
			...mapActions('userHome', ['getphotoWallApi','removeUserAdvantage']),
			//获取用户信息
			getUserInfo() {
				let data = {
					id: this.taId 
				}
				this.Http.POST(getUserInfo, data)
					.then((res) => {
						if (res.code == 0) {
							console.log('[用户信息]', res);
							this.list = res.data.advantages
							
						}
					})
			},
			getUserInfo2() {
				let data = {
					id:  uni.getStorageSync('userInfo').id
				}
				this.Http.POST(getUserInfo, data)
					.then((res) => {
						if (res.code == 0) {
							this.userId = res.data.id
						}
					})
			},
		},
		computed: {

		},
		components: {}
	}
</script>

<style>
	.table {
		padding: 10rpx 30rpx 10rpx 30rpx;
		border: 1rpx solid #333333;
		border-radius: 9rpx;
		margin-left: 20rpx;
		margin-top: 20rpx;
		border-radius: 99rpx;
		color: #333333;
	}

	.submit {
		width: 600rpx;
		height: 90rpx;
		background: linear-gradient(180deg, #EAA019 0%, #BA4949 100%);
		opacity: 1;
		border-radius: 50rpx;
		color: white;
		text-align: center;
		line-height: 90rpx;
	}

	.pop_body {
		width: 750rpx;
		height: 404rpx;
		background: #FFFFFF;
		opacity: 1;
		border-radius: 26rpx 26rpx 0px 0px;
		position: absolute;
		bottom: 0;
	}

	.pop_input {
		width: 491rpx;
		height: 84rpx;
		background: #EDEEF3;
		opacity: 1;
		border-radius: 8rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		margin: 0 auto;
		margin-top: 50rpx;
	}

	input {
		width: 100%;
	}

	.pop_submit {
		width: 379rpx;
		height: 86rpx;
		background: #FFAD01;
		opacity: 1;
		border-radius: 43rpx;
		line-height: 86rpx;
		text-align: center;
		color: white;
		margin: 0 auto;
		margin-top: 50rpx;
	}

	.warp2 {
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.4);
		z-index: 9;
	}

	/* 动态选中样式 */
	.active_bg {
		background-color: #EBD4EF !important;
		border: 1rpx solid #EBD4EF !important;
		color: white !important;
	}
</style>
